<template>
	<view class="wanlshop-classify-container">
		
		<block v-if="categoryStyle === 4">
			<view class="wanlshop-classify-container__list">
				<scroll-view scroll-y scroll-with-animation class="left" :scroll-top="scrollTop"
					:style="{ height: `${mainHeight}px`}">
					<view v-for="(item,index) in categoryData" :key="item.id" class="item"
						:class="[currentTab == index ? 'active' : '']" :data-current="index" @tap.stop="handleNav(item,index)">
						<text>{{ item.name }}</text>
					</view>
					<view class="edgeInsetBottom"></view>
				</scroll-view>
				<block v-for="(item, index) in categoryData" :key="item.id">
					<scroll-view scroll-y class="right" :style="{ height: `${mainHeight}px` }" v-if="currentTab == index">
						<view class="list-cat">
							<view class="padding-top-sm">
								<scroll-view scroll-x class="lists">
									<view class="text margin-right-sm" v-for="(data, index) in item.item" :key="index" @tap.stop="handleNavTwo(data,index)" :class="[data.id == ids ? 'cur' : '']">{{data.name}}
									</view>
								</scroll-view>
								<view class="goodsList">
									<wanl-empty v-if="goodsList.length == 0"></wanl-empty>
									<view class="item" v-for="(item,index) in goodsList" :key="index" @tap="$wanlshop.to(`/pages/medicalcare/visit/product?id=${item.id}&title=${categoryData[currentTab].name}`)">
										<image :src="$wanlshop.oss(item.image)" mode="aspectFill"></image>
										<view class="right">
											<text class="title text-cut-2">{{item.title}}</text>
											<view class="tags" v-if="item.tags">
												<text v-for="(d,k) in item.tags.split(',')" :key="k">{{d}}</text>
											</view>
											<view class="price flex justify-between align-center">
												<view class="money">
													<text class="text-price text-red">{{item.price}}</text>
													<!-- <text class="text-sm wanl-gray text-dec margin-left-xs">¥{{item.price}}</text> -->
												</view>
												<text class="text-sm wanl-gray">已售{{item.sale}}</text>
											</view>
										</view>
									</view>
								</view>
								
								<view class="edgeInsetBottom"></view>
							</view>
						</view>
					</scroll-view>
				</block>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		name: 'wanlShopClassify',
		props: {
			shopId: {
				type: Number,
				default: 0
			},
			categoryStyle: {
				type: Number,
				default: 4
			},
			mainHeight: {
				type: Number,
				default: 0
			},
			adverData: {
				type: Object,
				default () {}
			},
			categoryData: {
				type: Array,
				default: () => {
					return []
				}
			},
			goodsList: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				currentTab: 0, //预设当前项的值
				scrollTop: 0, //tab标题的滚动条位置
				ids: null
			}
		},
		methods: {
			// 点击标题切换当前页时改变样式
			handleNav(data,index) {
				this.ids = null;
				let cur = index;
				if (this.currentTab == cur) {
					// return false;
				} else {
					this.currentTab = cur;
					this.checkCor();
				}
				this.$emit('getGoods',data.id)
			},
			handleNavTwo(data,index) {
				this.ids = data.id;
				this.$emit('getGoods',data.id)
			},
			handleProduct(category_id, category_name) {
				if(this.shopId === 0){
					this.$wanlshop.to(
						`/pages/medicalcare/visit/injection?id=${category_id}&title=${category_name}`
					);
				}else{
					this.$wanlshop.to(
						`/pages/shop/product/list?shop_id=${this.shopId}&category_id=${category_id}&category_name=${category_name}`
					);
				}
			},
			//判断当前滚动超过一屏时，设置tab标题滚动条。
			checkCor() {
				if (this.currentTab > 7) {
					this.scrollTop = 500;
				} else {
					this.scrollTop = 0;
				}
			}
		}
	}
</script>

<style lang="scss">
	.wanlshop-classify-container {
		&__one {
			padding-left: 25rpx;
			padding-right: 25rpx;
			padding-bottom: 100rpx;
			padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
			image {
				width: 100%;
				height: 300rpx;
				border-radius: 15rpx;
				overflow: hidden;
			}
			.item {
				position: relative;
				display: flex;
				justify-content: center;
				margin-top: 25rpx;
				.category-title {
					font-size: 26rpx;
					position: absolute;
					bottom: 20rpx;
					border-radius: 10rpx;
					overflow: hidden;
					color: #666666;
					background-color: rgba(255, 255, 255, .6);
					width: 60%;
					text-align: center;
					padding: 4rpx 0;
				}
			}
		}
		&__grid {
			padding-bottom: 100rpx;
			padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
			.cu-list{
				background-color: rgba(255,255,255,0);
				&>.cu-item {
					padding: 25rpx 0;
					align-items: center;
					image {
						width: 160rpx;
						height: 160rpx;
						margin-bottom: 10rpx;
					}
				}
			}
		}
		&__list {
			display: flex;

			.left {
				width: 200rpx;
				z-index: 10;
				background: #fff;

				.item {
					width: 200rpx;
					height: 110rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
					color: #444;
					font-weight: 400;

					&.active {
						position: relative;
						color: #000;
						font-size: 30rpx;
						font-weight: 600;
						background: white;

						&::before {
							content: '';
							position: absolute;
							border-left: 6rpx solid #4CBD66;
							height: 32rpx;
							left: 0;
						}
					}
				}
			}

			.right {
				width: calc(100% - 200rpx);
				padding-left: 25rpx;
				box-sizing: border-box;

				/* background-image: linear-gradient(#fff, #f2f2f2, #f4f4f4, #f6f6f6); */
				.list-cat {
					width: 100%;
					overflow: hidden;
					padding-top: 10rpx;
					box-sizing: border-box;
					.lists {
						margin-bottom: 20rpx;
						display: flex;
						justify-content: flex-start;
						white-space: nowrap;
						.text {
							display: inline-block;
							width: 170rpx;
							height: 60rpx;
							text-align: center;
							line-height: 60rpx;
							border-radius: 50rpx;
							background-color: #fff;
							border: 1px solid #fff;
							font-size: 26rpx;
							&.cur {
								color: #fff;
								background-color: #4CBD66;
								border-color: #4CBD66;
							}
						}
					}
				}

				.screen-swiper {
					min-height: 180rpx;
					height: 180rpx;
					overflow: hidden;
				}

				.list-item {
					background: #ffffff;
					width: 100%;
					box-sizing: border-box;
					padding: 20rpx;
					margin-bottom: 20rpx;

					.title {
						color: #FF4F00;
					}
				}

				.list-container {
					/* padding-top: 20rpx; */
					display: flex;
					display: -webkit-flex;
					justify-content: flex-start;
					flex-direction: row;
					flex-wrap: wrap;
				}

				.list-box {
					width: 33.3333%;
					text-align: center;
					padding-top: 40rpx;
				}

				.list-image {
					width: 120rpx;
					height: 120rpx;
				}
			}
		}
	}
	.goodsList {
		background-color: #fff;
		.item {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 30rpx 0 14rpx;
			> image {
				width: 156rpx;
				height: 156rpx;
				border-radius: 6rpx;
			}
			.right {
				width: calc(100% - 180rpx);
				margin-left: 10rpx;
				.title {
					color: #333;
					font-size: 30rpx;
					font-weight: bold;
					font-family: PingFang SC-Bold, PingFang SC;
					margin-bottom: 10rpx;
				}
				.tags {
					margin-bottom: 10rpx;
					text {
						padding: 2rpx 6rpx;
						color: #4CBD66;
						border: 1px solid #4CBD66;
						font-size: 22rpx;
						border-radius: 6rpx;
						margin-right: 10rpx;
						&:last-child {
							margin-right: 0;
						}
					}
				}
				.price {
					.money {
						text {
							&:nth-child(1) {
								font-size: 36rpx;
								color: #E31F1F;
								font-weight: bold;
								font-family: DIN-Bold, DIN;
							}
							&:nth-child(2) {
								color: #888888;
								font-size: 24rpx;
							}
						}
					}
					> text {
						color: #888888;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>
